<!-- 
说明：交互组件:搜索框
作者：DEDEDE 
日期：2018-6-13 9:3:48 
版本：1.0.0
-->
<template>
  <div class="cm-ue-search"
       ref="search"
       :style="{height: showHistory ? '90vh' : '0.9rem'}"
       id="cm-ue-search">
    <div class="cm-ue-search-contain">
      <div class="cm-ue-search-search">
        <div class="cm-ue-search-search-input">
          <div class="cm-ue-search-search-input-search"></div>
          <form onsubmit="return false;"
                action="javascript:return true;"
                ref="form"
                @keyup.13="submit()">
            <input v-model="inputData"
                   :placeholder="totalProductCountText"
                   type="search"
                   @focus="inputFocus"
                   @blur="inputBlur"
                   ref="input">
          </form>
          <div class="cm-ue-search-search-input-close-empty"
               v-if="inputData.trim().length===0"></div>
          <div class="cm-ue-search-search-input-close"
               v-if="inputData.trim().length>0"
               @click="inputData = ''"></div>
        </div>
        <div class="cm-ue-search-search-cancel"
             ref="cancel"
             @click="cancel()">取消</div>
      </div>
    </div>
    <div class="dividing"></div>
    <div class="cm-ue-search-modal-body"
         v-if="showHistory">
      <div class="cm-ue-search-modal-body-top">
        <span>历史记录</span>
        <div @click="clearHistory"
             v-if="saveList.length > 0"></div>
      </div>
      <div class="cm-ue-search-modal-body-history">
        <div class="cm-ue-search-modal-body-history-per"
             v-for="(item,index) in saveList"
             @click="clickHistory(item,index)"
             :key="index">
          <span>{{item}}</span>
        </div>
      </div>
      <error-page type='allHide'
                  top="108"
                  bottom="0"
                  class="error-pages"
                  v-if="saveList.length === 0">
        <span class="error-pages-span">搜索历史空空如也,快输入您想要找的模板吧!</span>
      </error-page>
    </div>

  </div>
</template>

<script>
import ErrorPage from '@/components/error-page'
import mixins from '@/mixins'
export default {
  name: 'cm-ue-search',
  props: {
    extend: {
      type: Object,
      default () {
        return {
          opacity: 0,
          imgsHeight: 0,
          isShow: false,
          isScroll: false,
          searchTipText: '搜索您心仪的商品'
        }
      }
    },
    showHistory: {
      type: Boolean,
      default: true
    },
    defaultStr: {
      type: String,
      default: ''
    },
    totalProductCountText: {
      type: String,
      default: ''
    }
  },
  mixins: [mixins],
  data () {
    return {
      title: '搜索框',
      scrollTop: 0,
      endCalc: false,
      saveList: [],
      inputData: '',
      selfHeight: 0,
      productCount: 0
    }
  },
  mounted () {
    this.inputData = this.defaultStr || ''
    let homeHistoryList = this.$cache.getCache(this.$cache.keys.homeSearchHistory)
    // this.homeSelectedInfo = this.$cache.getCache(this.$cache.keys.homeSelectedInfo)
    // if (this.homeSelectedInfo) {
    //   this.homeSelectedInfo = JSON.parse(this.homeSelectedInfo)
    // }
    if (homeHistoryList) {
      this.saveList = JSON.parse(homeHistoryList)
    }
  },
  methods: {
    setScrollTop () {
      // 点击搜索框的时候跳到搜索框置顶的地方
      // window.scrollTo(0, this.extend.imgsHeight - this.selfHeight - 5)
      // 新的首页需要下面这个，注释掉上面这句
      window.scrollTo(0, this.extend.imgsHeight - this.selfHeight + 5)
    },
    inputFocus () {
      // let ele = document.getElementsByClassName('cm-ue-search-search')
      // if (ele && ele.length > 0) {
      //   console.error(ele[0].style.opacity)
      // }
      this.$emit('update:showHistory', true)
    },
    inputBlur () {
      this.$emit('update:showHistory', false)
    },
    // 请求网络 并保存本地
    async initNet (data, noAddList = false) {
      let num = 0
      let find = this.saveList.find(x => {
        num++
        return x === data
      })
      if (find === undefined) {
        if (noAddList === false) {
          if (this.saveList.length >= 10) {
            this.saveList.splice(9, 1)
            this.saveList.splice(0, 0, data)
          } else {
            this.saveList.splice(0, 0, data)
          }
          this.$cache.setCache(this.$cache.keys.homeSearchHistory, this.saveList)
        }
      } else {
        if (this.saveList[0] !== find) {
          this.saveList.splice(num - 1, 1)
          this.saveList.splice(0, 0, find)
          this.$cache.setCache(this.$cache.keys.homeSearchHistory, this.saveList)
        }
      }
      // this.$cache.setCache(this.$cache.keys.homeSelectedInfo, this.homeSelectedInfo)
      // this.$cache.setCache('isSearch', true)
      // if (this.$route.query.isHome) {
      // this.$router.push({name: 'choose-module'})
      // } else {
      // this.$router.back()
      // }
      // setTimeout(() => {
      //   window.scrollTo(0, this.extend.imgsHeight - this.selfHeight)
      // }, 0)
      // this.$router.push({name: 'search-result', query: {searchResult: data}})
      this.$emit('subSearchData', data)
    },
    // 清除历史
    clearHistory () {
      this.saveList = []
      this.$cache.setCache(this.$cache.keys.homeSearchHistory, this.saveList)
    },
    // 点击历史记录
    clickHistory (item, index) {
      this.inputData = item
      this.initNet(item, index === 0)
    },
    // 取消
    cancel () {
      this.$emit('hideSearch')
    },
    // 确定输入
    submit () {
      if (this.inputData && this.inputData.trim().length > 0) {
        this.initNet(this.inputData)
        // 在点击确定后隐藏小键盘
        this.$refs.input.blur()
      }
    },
    px2rem (px) {
      let rem = 100
      return `${px / rem}rem`
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  },
  components: {
    ErrorPage
  }
}
</script>

<style lang="stylus">
.error-pages {
  position: absolute !important;

  .error-pages-span {
    font-size: 26px !important;
    margin-top: 100px !important;
    color: rgba(153, 153, 153, 1) !important;
  }
}

.cm-ue-search {
  // padding: 16px 24px 17px 24px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  transition: all 0.3s;

  .cm-ue-search-contain {
    background: white;
    margin: 16px 24px 17px 24px;
    // width: 100%;
    height: 60px;
    border-radius: 10px;

    .cm-ue-search-contain-input {
      height: 60px;

      form {
        width: 100%;
        height: 100%;
        position: relative;

        input {
          position: absolute;
          width: 100%;
          height: 100%;
          padding-left: 20px;
          padding-right: 20px;
          outline: none;
          border: none;
        }
      }
    }

    .cm-ue-search-search {
      width: 100%;
      // padding-left: 25px;
      // padding-right: 25px;
      display: flex;
      justify-content: center;
      align-items: center;

      .cm-ue-search-search-input {
        display: flex;
        width: 87%;
        background: RGBA(243, 243, 243, 1);
        border-radius: 100px;
        display: flex;
        justify-content: center;
        align-items: center;

        form {
          display: flex;
          width: 75%;
          height: 60px;
          margin-left: 23px;
          margin-right: 23px;
        }

        input {
          display: flex;
          border: none;
          background: RGBA(243, 243, 243, 1);
          outline: none;
          width: 100%;
          font-size: 27px;
        }

        input::-webkit-search-cancel-button {
          display: none;
        }

        .cm-ue-search-search-input-search {
          background-image: url('~@image/icon-search.png');
          background-size: 30px 30px;
          width: 30px;
          height: 30px;
          background-repeat: no-repeat;
        }

        .cm-ue-search-search-input-close {
          background-image: url('~@image/close-deep.png');
          background-size: 28px 28px;
          width: 28px;
          height: 28px;
          background-repeat: no-repeat;
        }

        .cm-ue-search-search-input-close-empty {
          width: 28px;
          height: 28px;
        }
      }

      .cm-ue-search-search-cancel {
        margin-right: 25px;
        margin-left: 13px;
        font-size: 26px;
        color: rgba(153, 153, 153, 1);
      }
    }
  }

  .dividing {
    width: 100%;
    height: 1px;
    background: RGBA(223, 223, 223, 1);
  }

  .cm-ue-search-modal-body {
    padding-left: 25px;
    padding-right: 25px;
    position: relative;
    flex: 1;
    height: 100%;
    // width: 100%;
    background: white;

    .cm-ue-search-modal-body-top {
      height: 87px;
      display: flex;
      justify-content: space-between;
      font-size: 30px;
      color: rgba(51, 51, 51, 1);
      align-items: center;

      div {
        width: 25px;
        height: 31px;
        background-image: url('~@image/icon-delete.png');
        background-size: 25px 31px;
        background-repeat: no-repeat;
      }
    }

    .cm-ue-search-modal-body-history {
      // width: 100%;
      display: flex;
      flex-wrap: wrap;
      font-size: 26px;
      color: rgba(51, 51, 51, 1);

      .cm-ue-search-modal-body-history-per {
        margin-left: 20px;
        margin-bottom: 23px;
        min-height: 50px;
        max-width: 700px;
        padding-left: 24px;
        padding-right: 23px;
        background: rgba(243, 243, 243, 1);
        border-radius: 100px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
